<template>
  <div>
    <!-- 占位元素 -->
    <div :style="{ width: '100%', height: '104px' }"></div>
    <div class="nav-bar">
      <div v-if="scrollTop < 80" class="user-wrap">
        <span v-if="!userInfo" @click="goLogin">{{$t('您还未登录,去登录')}}!</span>
        <span v-else>{{ $t('您好') }},{{ userInfo.username }} (<span @click="tuichu">{{ $t("sign-out") }}</span>)</span>
      </div>
      <div class="nav-wrap">
        <div class="left-wrap">
          <img src="@/assets/image/navbar/menu.png" alt="" @click="$refs.menuRef.show()">
        </div>
        <div class="logo-wrap">
          <img :class="['logo-img', isAr && 'top_logo_img']" :src="logo"
               :style="itemData.logoHeight && { height: itemData.logoHeight + 'px' }"/>
        </div>
        <div class="right-wrap">
<!--          <template v-if="!isPutApp">-->
<!--            <router-link to="/language">-->
<!--              <div class="cn-wrap">-->
<!--                <img class="cn-img" :src="languageIcon"/>-->
<!--                <img class="down-img" src="@/assets/image/index/down-icon.png"/>-->
<!--              </div>-->
<!--            </router-link>-->
<!--          </template>-->
          <img src="@/assets/image/navbar/user.png" alt="" class="user-img" @click="goMe">
          <img src="@/assets/image/navbar/shop.png" alt="" class="shop-img" @click="goCard">

          <div class="tz-wrap" @click="information">
            <van-badge v-if="queryMessages > 0" :content="queryMessages" max="99">
              <img class="tongzhi-img" src="@/assets/image/navbar/tongzhi.png" alt=""/>
            </van-badge>
            <img v-else class="tongzhi-img" src="@/assets/image/navbar/tongzhi.png" alt=""/>
          </div>
        </div>
      </div>
    </div>
    <VMenu ref="menuRef" />
    <Cart ref="cartRef" />
  </div>
</template>

<script>
import {isLogin} from "@/utils/utis";
import {apiQueryMessages} from "@/API/common";
import {mapGetters} from "vuex";
import {apiLogout} from "@/API/user";
import VMenu from "./VMenu.vue";
import Cart from "@/page/cart";
import { Badge } from 'vant';

export default {
  name: 'VNavBar',
  components: {
    Cart,
    VMenu,
    [Badge.name]: Badge
  },
  data() {
    return {
      itemName: process.env.VUE_APP_ITEM_NAME,
      isPutApp: process.env.VUE_APP_PUT_ON_SHELVES,
      itemData: this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME],
      isAr: localStorage.getItem("lang") == "ar",
      queryMessages: 0, // 未读消息
      msgNum: 0, //未读消息数量
      time: null,
      scrollTop: 0,
    }
  },
  computed:{
    ...mapGetters({
      userInfo: "userInfo",
    }),
    logo() {
      if (this.itemName == 'EShop') {
        return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo-h.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
      }
      return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
    },
    languageIcon() {
      let language = localStorage.getItem('lang') || "en";
      if (language == 'en-US' || language == '"en-US"') {
        language = 'en'
      } else if (language == 'zh-CN' || language == "'zh-CN'") {
        language = 'cn'
      } else if (language == 'zh-TW' || language == "'zh-TW'") {
        language = 'tw'
      }
      const icon = {
        "cn": require("@/assets/image/language/cn.png"),
        "en": require("@/assets/image/language/usa.png"),
        "tw": require("@/assets/image/language/tw.png"),
        "de": require("@/assets/image/language/de.png"),
        "ja": require("@/assets/image/language/ja.png"),
        "ms": require("@/assets/image/language/ms.png"),
        "th": require("@/assets/image/language/th.png"),
        "pt": require("@/assets/image/language/pt.png"),
        "es": require("@/assets/image/language/es.png"),
        "ru": require("@/assets/image/language/ru.png"),
        "el": require("@/assets/image/language/el.png"),
        "it": require("@/assets/image/language/it.png"),
        "tr": require("@/assets/image/language/tr.png"),
        "af": require("@/assets/image/language/af.png"),
        "fr": require("@/assets/image/language/fr.png"),
        "ko": require("@/assets/image/language/ko.png"),
        "ph": require("@/assets/image/language/ph.png"),
        "ar": require("@/assets/image/language/ar.png"),
        "vi": require("@/assets/image/language/vi.png"),
        "hi": require("@/assets/image/language/hi.png"),
        "id": require("@/assets/image/language/id.png"),
      };
      return language ? icon[language] : icon['en'];
    },
  },
  created() {
    this.init();
  },
  mounted() {
    setTimeout(() => {
      window.addEventListener("scroll", this.handleScroll);
    }, 1000);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    clearInterval(this.time);
  },
  methods:{
    isLogin,
    async init() {
      // 查询未读消息
      this.getMessageNum();
      this.time = setInterval(() => {
        this.getMessageNum();
      }, 10000);
    },
    async getMessageNum() {
      this.queryMessages = await apiQueryMessages({ loginType: 'user' });
    },
    information() {
      if (!isLogin()) {
        // Dialog.confirm({
        //     title: this.$t("您还未登录"),
        //     message: this.$t("是否跳转到登录页面"),
        //     confirmButtonText: this.$t("确认"),
        //     cancelButtonText: this.$t("取消"),
        // }).then(() => {
        //     this.$router.push("/login");
        // });
        this.$notifyWarn(this.$t("请先登录"));
        this.$router.push("/login");
      } else {
        //   this.$router.push("/information");
        this.$router.push("/customerService2?path=contacts");
      }
    },
    goLogin() {
      this.$notifyWarn(this.$t("请先登录"));
      this.$router.push("/login");
    },
    tuichu() {
      apiLogout({ token: localStorage.getItem('token') })
      this.$store.dispatch('logout')
      this.$router.push('/')
    },
    // 记录滚动条位置
    handleScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    },
    goCard() {
      if (!isLogin()) {
        this.$notifyWarn(this.$t("请先登录"));
        this.$router.push('/login')
        return
      }
      this.$refs.cartRef.show()
    },
    goMe() {
      if (!isLogin()) {
        this.$notifyWarn(this.$t("请先登录"));
        this.$router.push('/login')
        return
      }
      if (this.$route.path !== '/me') {
        this.$router.push('/me')
      }
    },
  }
}
</script>

<style scoped lang="scss">
.nav-bar{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1799;
  transition: padding 0.5s linear;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  .user-wrap{
    height: 38px;
    background-color: #d62014;
    display: flex;
    justify-content: center;
    align-items: center;
    >span{
      color: #ffffff;
      font-size: 14px;
    }
  }
  .nav-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 46px;
    .left-wrap{
      display: flex;
      align-items: center;
      >img{
        height: 32px;
      }
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      .logo-img {
        width: auto;
        height: 50px;
      }
      .top_logo_img {
        transform: scaleX(-1) !important;
      }
    }
    .right-wrap{
      display: flex;
      .user-img{
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      .shop-img{
        width: 24px;
        height: 24px;
      }
    }
  }
}
.tz-wrap{
  width: 28px;
  height: 28px;
  margin-top: -2px;
  margin-left: 10px;
  .tongzhi-img {
    width: 28px;
    height: 28px;
  }
  /deep/ .van-badge--fixed{
    top: 3px;
  }
}



</style>
